<template>
  <div id="user">
      <div class="bt">&nbsp;/&nbsp;所有&nbsp;› &nbsp;个人中心</div>
      <div class="user_area">
		<div class="navigation">
			<ul>
				<li class="select"><router-link to="./index" >基本信息</router-link></li>
				<li><router-link to="./notice" >我的消息</router-link></li>
				<li><router-link to="./address" >收货地址</router-link></li>
				<li><router-link to="./myorder" >我的订单</router-link></li>
			    <li><router-link to="./shop_car" >购物车</router-link></li>
			</ul>	
		</div>
		<div class="main">
			<table>
				<tr>
					<td class="photo">
							<span v-html="imgurl"></span>
							<p class="btn"><button>{{ username }}</button></p>
					</td>
					<td class="weather">
						<div class="today">
								<button class="status">{{ status || '加载中' }}</button>
								<button class="city">{{ city || '加载中' }}</button>
								<p class="day">{{ date || '加载中' }}</p>
								<p class="old_day">{{ wind || '加载中' }}</p>
								<p class="temperature">{{ temperature || '加载中' }}</p>
						</div>

					</td>
				</tr>
			</table>
			<table style="margin-top: 30px;margin-left:50px" class="table2">
					<tr>
						<th width="800px" colspan="2">基本信息</th>
					</tr>
					<tr >
						<td colspan="2" style="height: 5px;"></td>
					</tr>
					<tr >
						<td width="360px"><span>年龄:</span></td>
						<td width="440px">{{ age_num }}岁</td>
					</tr>
					<tr>
						<td width="360px"><span>邮箱:</span></td>
						<td width="440px">{{ email_num }}</td>
					</tr>
					<tr>
						<td width="360px"><span>所在地:</span></td>
						<td width="440px">{{ address }}</td>
					</tr>
					<tr>
						<td width="360px"><span>一句话介绍自己:</span></td>
						<td width="440px">{{ summary_num }}</td>		
					</tr>
			</table>
		</div>
      </div>
  </div>
</template>

<script>

export default {

  components:{

  },
  data() {
    return {
    	weather:'',
    	city:'',
    	status:'',
    	wind:'',
    	temperature:'',
    	date:'',
    	username:'',
    	address:'',
    	age_num:'',
    	email_num:'',
    	summary_num:'',
    	imgurl:''
    }
  },
  created:function(){
  	if(this.$cookie.get('uid') == ''){
      window.location.href="/";
      return;
    }
  	//this.get_weather();
  	this.get_userinfo();
  },
  methods:{
  	get_weather(){
	    this.$http({
	        method:'GET',
	            url:'http://123.56.86.203/weather',
	    }).then(function(info){
	    	var data=info.data;
	    	if(data.error_code == 0){
	    		this.weather=data.result;
	    		this.city=this.weather.basic.city;

	    		this.date=this.weather.daily_forecast[0].date;
	    		this.status=this.weather.daily_forecast[0].cond.txt_d;
	    		this.wind=this.weather.daily_forecast[0].wind.dir+'/'+this.weather.daily_forecast[0].wind.sc;
	    		this.temperature=this.weather.daily_forecast[0].tmp.min+'℃~'+this.weather.daily_forecast[0].tmp.max+'℃';
	    	}
	    },function(error){
	          console.log(error);
	    })	
  	},
  	get_userinfo(){
	    this.$http({
	        method:'GET',
	        url:'http://123.56.86.203/queryuser?id='+this.$cookie.get('uid'),
	    }).then(function(res){
	        var result = res.data;
	          if(result.status == 1){
	          	 this.username=result.info.username == ''?'暂无':result.info.username;
	             this.address=result.info.address == ''?'北京北京东城区':result.info.address;
	             this.age_num= result.info.age =='' || result.info.age == null ?'暂无':result.info.age;
	             this.email_num= result.info.email =='' || result.info.email ==null?'暂无':result.info.email;
	             this.summary_num= result.info.summary =='' || result.info.summary ==null ?'这家伙很懒，暂无简介':result.info.summary;
	             this.imgurl= result.info.photo =='' || result.info.photo == null ?"<img src='./static/img/default.png'>":result.info.photo;
	          }else{
	            alert(result.info);
	          }
	      },function(error){
	         console.log(error);
	      })
  	}
  }
}
</script>
<style>
.photo span img{
  border-radius: 50%;
  width: 72%;
  height: 72%;
  position: relative;
  left:15%;
}
</style>
<style scoped>
.router-link-active{
  background-color: rgba(255,255,255,0.5);
}
#user{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.user_area{
	width: 100%;
	margin:10px;
}
.user_area .navigation{
	padding-top: 15px;
	padding-bottom: 15px;
	width: 12%;
	background-color: rgba(255,255,255,0.6);
	float: left;

}
.user_area .navigation ul{
	width: 100%;
}
.user_area .navigation ul li a{
	width: 85%;
	font:15px/30px '微软雅黑';
	color:#666;
	padding-left: 15%;
}
.user_area .navigation ul .select a{
	color:#FF4400;
}
.user_area .main{
	float: left;
	width: 75.5%;
	margin-left: 3%;
	background-color: rgba(255,255,255,0.6);
	padding: 30px 4%;
}

.user_area .main table tr .photo{
	width: 200px;
	height: 200px;
	border-right:1px solid #ccc;
}
.user_area .main table tr img{
  border-radius: 50%;
  width: 72%;
  height: 72%;
  position: relative;
  left:15%;

}
.user_area .main table tr button{
  width: 70%;
  height: 40px;
  border: 1px solid #DE5246;
  background-color: #DE5246;
  color:#fff;
   position: relative;
  left:16%;
  top:5px;
}
.user_area .main table tr .weather{
	width:600px;

}
.user_area .main table tr .weather .today{
	width:30%;
	height: 198px;
	float: left;
	margin-left:25px;
}
.user_area .main table tr .weather .today .status{
	background-color: #FF7E00;
	border: 1px solid #FF7E00;
	width: 60%;
	height: 35px;
	left:20%;
	margin-top:10px;
}
.user_area .main table tr .weather .today .city{
	background-color: #1992FC;
	border: 1px solid #1992FC;
	width: 60%;
	height: 35px;
	left:20%;
	margin-top:10px;
}
.user_area .main table tr .weather .today .day{
  width: 100%;
  text-align: center;
  font:18px/30px '微软雅黑';
	margin-top:10px;  
}
.user_area .main table tr .weather .today .old_day{
  width: 100%;
  text-align: center;
  font:14px/30px '微软雅黑';	
}
.user_area .main table tr .weather .today .temperature{
  width: 100%;
  text-align: center;
  font:22px/40px '微软雅黑';
}
.table2{
	text-align: left;
}
.table2 tr th{
	font:25px/35px '微软雅黑';
	height: 50px;
	border-bottom: 1px solid #ccc;
}
.table2 tr td{
	height: 34px;
	font:14px/32px '微软雅黑';
	color:#666;

}

.table2 tr td span{
	font:bold 15px/32px '微软雅黑';
	color:#000;	
}
</style>
